@import "Main";
.ReTab_Container {
  width: 100%;

  .hide{
    display: none;
  }

  .ReTab_TitleBackground {
    background-color: @mainColor;

    .showSliderItems{
      position:absolute;
      top:0;
    }

    .leftSliderItem{
      left:0;
    }

    .rightSliderItem{
      right:0;
    }

    .ReTab_Adapter {
      overflow: hidden;

      .ReTab_Title {
        width: 100%;
        background-color: @mainColor;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        color: #ffffff;
        display: inline-block;
        position: relative;
        white-space: nowrap;

        .ripple {
          width: 0;
          height: 0;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.4);
          -webkit-transform: scale(0);
          -ms-transform: scale(0);
          transform: scale(0);
          position: absolute;
          opacity: 1;
          display: inline;
        }

        .ReTab_Down {
          position: absolute;
          left: 0;
          bottom: 0;
          height: 5px;
          background-color: #ffb300;
          -webkit-transition: left 0.5s;
          -moz-transition: left 0.5s;
          -ms-transition: left 0.5s;
          -o-transition: left 0.5s;
          transition: left 0.5s;
        }

        .rippleEffect {
          -webkit-animation: rippleDrop 1s linear;
          animation: rippleDrop 1s linear;
        }

        .ReTab_Title_Item {
          height: 50px;
          line-height: 50px;
          width: 33.33%;
          text-align: center;
          display: inline-block;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
      }
    }
  }

  .ReTab_Title_Contents_Item {
    /*-webkit-transition: opacity 3s ;
    -moz-transition:  opacity 3s;
    -ms-transition: opacity 3s;
    -o-transition: opacity 3s;
    transition: opacity 3s;
    visibility: hidden;
    opacity: 0;
    height:0;
    width:0;*/
    display: none;
    opacity: 0;
    position: relative;
  }

  .ReTab_Contents {
    overflow: hidden;
    & > .active {
      /* visibility: visible;
       opacity: 1;
       width:auto;
       height:auto;*/
      display: block;
      animation: 1s OpacityOut forwards;
      opacity: 1 \0; /* IE8，9,10 and below */
    }
  }

  //ie9以上覆盖
  @media screen and (min-width: 0px) {
    .ReTab_Contents {
      & > .active {
        opacity: 0;
        opacity: 1 \9; //ie9
      }
    }
  }
}

@keyframes OpacityOut {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, 0, 0);
    -moz-transform: translate3d(1000px, 0, 0);
    -ms-transform: translate3d(1000px, 0, 0);
    -o-transform: translate3d(1000px, 0, 0);
    transform: translate3d(1000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes rippleDrop {
  100% {
    -webkit-transform: scale3d(2, 2, 0);
    transform: scale3d(2, 2, 0);
    opacity: 0;
  }
}

@keyframes rippleDrop {
  100% {
    -webkit-transform: scale3d(2, 2, 0);
    transform: scale3d(2, 2, 0);
    opacity: 0;
  }
}